<template>
  <view v-if="show" class="lite-popup">
    <view class="lite-popup__overlay" @click="handleOverlayClick"></view>
    <view class="lite-popup__content" 
          :class="[`lite-popup__content--${mode}`]"
          :style="contentStyle">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LitePopup',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'center', // center, bottom, top, left, right
      validator: (value) => ['center', 'bottom', 'top', 'left', 'right'].includes(value)
    },
    round: {
      type: [String, Number],
      default: 0
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    contentStyle() {
      return {
        borderRadius: this.round + 'px'
      }
    }
  },
  methods: {
    handleOverlayClick() {
      if (this.closeOnClickOverlay) {
        this.$emit('update:show', false)
        this.$emit('close')
      }
    }
  }
}
</script>

<style scoped>
.lite-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
}

.lite-popup__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.lite-popup__content {
  position: relative;
  background-color: #ffffff;
  z-index: 1001;
}

/* 居中弹出 */
.lite-popup__content--center {
  margin: auto;
  max-width: 80%;
  max-height: 80%;
}

/* 底部弹出 */
.lite-popup__content--bottom {
  align-self: flex-end;
  width: 100%;
  border-radius: 20px 20px 0 0;
}

/* 顶部弹出 */
.lite-popup__content--top {
  align-self: flex-start;
  width: 100%;
  border-radius: 0 0 20px 20px;
}

/* 左侧弹出 */
.lite-popup__content--left {
  align-self: stretch;
  height: 100%;
  border-radius: 0 20px 20px 0;
}

/* 右侧弹出 */
.lite-popup__content--right {
  align-self: stretch;
  margin-left: auto;
  height: 100%;
  border-radius: 20px 0 0 20px;
}
</style>